<template>
  <a-layout style="min-height: 100vh">
    <a-layout-content style="background-color: #F2F2E6">
      <div style="padding-top: 8vh; padding-bottom: 4vh;">
        <v-card-title class="text-center justify-center py-6">
          <h1 class="font-weight-bold text-h2 basil--text">
            Guidance Depository
          </h1>
        </v-card-title>
        <v-card-subtitle class="text-center justify-center">
          <h2 class="font-weight-bold text-h3 basil--text">
            创新引导仓库
          </h2>
        </v-card-subtitle>
        <v-card color="basil" flat>
          <v-card-text>
            <a-spin tip="Loading..." :spinning="searchLoading">
              <a-list item-layout="vertical" size="large" :pagination="pagination_U" :data-source="guideData">
                <div slot="footer"><b>MindFall</b> Guidance Depository —— 我的历史创新引导</div>
                <a-list-item slot="renderItem" key="item.id" slot-scope="item, index">
                  <v-card-text style="padding-left: 20px; padding-bottom: 0; padding-top: 30px">
                    <v-row style="padding-left: 10px; margin-bottom: 5px">
                      <h1 class="font-weight-bold text-sm-h6 basil--text">
                        创新引导：{{item.name}}
                      </h1>
                      <v-spacer>
                      </v-spacer>
<!--                      创建时间-->
                      <span style="font-size: 15px; font-weight: bolder; color: #89B8CA">
                                <a-icon type="calendar" />
                                创建时间：{{ item.createTime }}&emsp;
                              </span>
                    </v-row>
                    <div style="margin-top: 2vh">
                      <a-steps :current="item.process">
                        <a-step title="问题引导">
                          <a-icon slot="icon" type="form" />
                        </a-step>
                        <a-step title="问题模型建立">
                          <a-icon slot="icon" type="sliders" />
                        </a-step>
                        <a-step title="生成解决途径">
                          <a-icon slot="icon" type="profile" />
                        </a-step>
                        <a-step title="专利智能搜索及标记">
                          <a-icon slot="icon" type="search" />
                        </a-step>
                        <a-step title="解决方案形成">
                          <a-icon slot="icon" type="check-circle" />
                        </a-step>
                      </a-steps>
                    </div>
                  </v-card-text>
                  <v-card-actions style="margin-top: 2vh;">
                    <v-spacer></v-spacer>
                    <v-btn color="main_1" style="color: snow" @click="handleClick(item)">继续创新引导</v-btn>
                    <v-btn color="#965454" style="color: snow" @click="displayDelete(item.id)">删除创新引导</v-btn>
                  </v-card-actions>
                </a-list-item>
              </a-list>
            </a-spin>
          </v-card-text>
        </v-card>
      </div>

      <a-modal
        :visible="dialog"
        title="删除确认"
        max-width="400"
        ok-text="删除"
        :closable="false"
        @cancel="dialog = false"
        @ok="deleteGuide"
      >
        <p style="font-family: '微软雅黑 Light',serif; font-weight: bold">
          <a-icon type="info-circle" style="color: #e28300"/>
          我们强烈建议您不要删除这一创新引导，这会导致其对应的解决方案及其相关所有数据被删除！
        </p>
      </a-modal>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import request from "../utils/request";

  export default {
    name: "Guide",
    created() {
      this.loadGuides()
    },
    computed:{

    },
    data () {
      return {
        searchLoading: false,
        dialog: false,
        guideData: [],
        deleteId: -1,
        pagination_U: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        },
      }
    },
    methods:{
      loadGuides(){
        request.get('/guide/currentUser').then(res => {
          if (res.code === '200'){
            this.guideData = res.data
          }
        })
      },
      async handleClick(row) {
        await this.$store.commit('SET_KEEP_ALIVE', [])
        sessionStorage.setItem('guideId',window.btoa(window.encodeURIComponent(JSON.stringify(row.id))))
        this.$store.state.maxStep = row.process
        this.$store.commit('SET_KEEP_ALIVE', ['guidance_questions', 'guidance_model', 'guidance_retrieval', 'solution_edit'])
        if (row.process === 0)
        {
          let notfoundUrl = this.$router.resolve({path: "/intelligent_guidance/questions"})
          window.open(notfoundUrl.href, '_blank')
        }
        else if (row.process === 1){
          let notfoundUrl = this.$router.resolve({path: "/intelligent_guidance/model"})
          window.open(notfoundUrl.href, '_blank')
        }
        else if (row.process === 3){
          let notfoundUrl = this.$router.resolve({path: "/intelligent_guidance/retrieval"})
          window.open(notfoundUrl.href, '_blank')
        }
        else if (row.process === 4){
          let notfoundUrl = this.$router.resolve({path: "/intelligent_guidance/solution_edit"});
          window.open(notfoundUrl.href, '_blank');
        }
      },
      displayDelete(id){
        this.dialog = true
        this.deleteId = id
      },
      deleteGuide(){
        request.delete('/guide/' + this.deleteId).then(res =>{
          if (res.code === '200')
            this.sendSuccessMessage('删除成功')
          else
            this.sendWarnMessage(res.msg)
          this.dialog = false
          this.loadGuides()
        })
      }
    }
  }
</script>

<style>
  .basil {
    background-color: #F2F2E6 !important;
  }
  .basil--text {
    color: #89B8CA !important;
  }
  .v-application ul, .v-application ol{
    padding-left: 0 !important;
  }
  .ant-modal-body{
    padding-bottom: 5px !important;
  }

</style>
